<script setup lang="ts" name="App">
import './App.less'
import { computed, ref, watch } from 'vue'
import AppHeader from './Todo/AppHeader.vue'
import NewTodoInput from './Todo/NewTodoInput.vue'
import TodoList from './Todo/TodoList.vue'
import UnderBar from './Todo/UnderBar.vue'
import Copyright from './Todo/Copyright.vue'
import { useTodoStore } from './Storage'

const store = useTodoStore()

const filterType = ref<filterType>('all')
const filters = {
  all: (list: Todo[]) => list,
  active: (list: Todo[]) => list.filter(t => !t.done),
  done: (list: Todo[]) => list.filter(t => t.done),
}
const filterdTodos = computed(() =>
  filters[filterType.value](store.state.todos)
)
const activeTodoCount = computed(() =>
  filters['active'](store.state.todos).length
)

// 监听 state 改变
watch(store.state, (newVal) => {
  // console.log('Write to localStorage: ', newVal)
  store.saveLocalStorage(newVal)
}, { deep: true })
</script>

<template>
  <AppHeader />
  <NewTodoInput />
  <TodoList :todos=filterdTodos />
  <UnderBar :filteredCount=activeTodoCount v-model:filterType=filterType />
  <Copyright />
</template>
